import React, { Component } from 'react'
import { Form, Input, Button, Checkbox ,DatePicker} from 'antd';


import { connect} from 'react-redux'

const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  };
  const formTailLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
  };
  const { TextArea } = Input;
 class Edit extends Component {
    constructor(params) {
        super()
      this.state = {
            checkNick: false,
            data:{}
          };

    
    }
    componentDidMount(){
      console.log(this);
      this.setState({
        data:this.props.articeinfo
      })
      
    }
    check = () => {
        this.props.form.validateFields((err,values) => {
          if (!err) {
          
          
            values['date-picker']=values['date-picker'].format('YYYY-MM-DD')
         console.log(values);
         
          
          }
        });
      };
    
      
    render() {
        const { getFieldDecorator } = this.props.form;
        const config = {
            rules: [{ type: 'object',  message: 'Please select time!' }],
          };
        return (
            <div>
            <Form.Item {...formItemLayout} label="作者">
              {getFieldDecorator('username', {
                 initialValue:this.state.data.name,
                rules: [
                  {
                   
                    message: '请输入作者',
                  },
                ],
              })(<Input placeholder="请输入作者"    />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="标题">
              {getFieldDecorator('nickname', {
                initialValue:this.state.data.title,
                rules: [
                  {
                    required: this.state.checkNick,
                    message: '请输入标题',
                  },
                ],
              })(<Input placeholder="请输入标题" />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="点击量">
              {getFieldDecorator('count', {
                    initialValue:this.state.data.amount,
              })(<Input placeholder="请设置点击量" />)}
            </Form.Item>
            
            <Form.Item {...formItemLayout} label="时间">
            {getFieldDecorator('date-picker', config)(<DatePicker />)}
        </Form.Item>
           
            
            <Form.Item {...formItemLayout} label="详情">
              {getFieldDecorator('desc', {
                
              })(<TextArea rows={12} />)}
            </Form.Item>
            <Form.Item {...formTailLayout}>
              <Button type="primary" onClick={this.check}>
                确认修改
              </Button>
            </Form.Item>
          </div>
        )
    }
}
const mapState = (state) => {
  
  console.log(state);
      return{
        articeinfo:state.Edit
      }

}

export default  Form.create({ name: 'dynamic_rule' })(connect(mapState)(Edit));
